<template>
	<div class="mainContent offerinfo-container">
		<!-- 供应商报价信息 供应商端 -->
		<div class="bread-nav">
			<span class="bread-item">供应商管理</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">供应商基本信息</span>
			<span class="bread-icon">&gt;</span>
			<span class="bread-item">供应商报价信息</span>
		</div>
		<!--  -->
		<div class="offerinfo-contant">
			<!-- search form -->
			<div class="search-cont">
				<card :configArr="Model.configArr" @changingCondition="cardEmit"></card>
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">查询条件</div>
					</div>
				</el-row>
				<advancedSearch :option="Model.filterOption" @getChild="showChild" @onSearch="toSearch" @onClear="toClear"
				 @onExport="toExport"></advancedSearch>
			</div>
			<!-- search form end-->
			<!-- table -->
			<div class="offerinfo-table">
				<!--  -->
				<el-row>
					<div class="common-table-title">
						<div class="common-table-icon"></div>
						<div class="common-table-fl">供应商换算</div>
						<div class="common-btn-group">
							<div class="common-table-btn-item" @click="newList">新建</div>
							<div class="common-table-btn-item" @click="batchExport">批量导出</div>
						</div>
					</div>
				</el-row>
				<!--  -->
				<el-row class="common-table-con">
					<el-table stripe :data="Model.tableData" :row-style="selectedHighlight" @selection-change="handleSelectionChange">
						<el-table-column align="center" type="selection" fixed="left" width="50">
						</el-table-column>
						<el-table-column align="center" v-for="(item,index) in Model.tableHeaderData" :key="index" :prop="item.prop"
						 :fixed="item.fixed" :label="item.label" :width="item.width">
						</el-table-column>
						<el-table-column align="center" fixed="right" label="操作" width="100">
							<template slot-scope="scope">
								<div v-if="scope.row.status === '待审批' " class="operate-btn" @click="handleClickChangeList(scope.row)">修改</div>
							</template>
						</el-table-column>
					</el-table>

					<!-- 分页 -->
					<el-row class="pagination-cont">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="Model.paginationObject.currentPage"
						 :page-sizes="[10, 20, 30, 40]" :pager-count="5" :page-size="Model.paginationObject.pageSize" layout="sizes, prev, pager, next, jumper, slot"
						 :total="Model.paginationObject.total">
							<div class="pagination-slot">
								显示
								<p class="slot-i">{{Model.paginationObject.num1}}</p>
								到
								<p class="slot-i">{{Model.paginationObject.num2}}</p>
								，共
								<p class="slot-i">{{Model.paginationObject.total}}</p>
								记录
							</div>
						</el-pagination>
					</el-row>
				</el-row>
			</div>
			<!--  -->
		</div>
		<!-- 操作提示 -->
		<el-dialog :visible.sync="Model.dialogAlert" top="100px" class="operate-tips-dialog">
			<!--  -->
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">提示</div>
			</div>
			<el-form v-model="Model.dialogAdd" class="dialog-add-list">
				<!--  -->
				<el-form-item label="材质">
					<el-select v-model="Model.materialShow" placeholder="请选择">
						<el-option v-for="(item,index) in Model.selectData" :key="index" :label="item.label" :value="item.value"></el-option>
					</el-select>
				</el-form-item>
				<!--  -->
				<el-form-item label="报价">
					<el-input v-model="Model.dialogAdd.supplierPrice" type="number"></el-input>
				</el-form-item>
				<!--  -->
				<!-- <el-form-item label="上金所价格">
              <el-input v-model="dialogAdd.exchangePrice" type="number" readonly></el-input>
            </el-form-item> -->
			</el-form>
			<div class="operate-tips-btn-group">
				<div class="operate-tips-btn-item" @click="save">保存</div>
			</div>


		</el-dialog>
		<!-- 提示3 -->
		<el-dialog :visible.sync="Model.dialogTips" top="100px" class="operate-tips-dialog">
			<!--  -->
			<div class="common-table-title">
				<div class="common-table-icon"></div>
				<div class="common-table-fl">提示</div>
			</div>
			<p class="confirm-msg">{{Model.dialogTipsMsg}}</p>
		</el-dialog>
		<!--  -->
	</div>
	</div>
</template>

<script>
	import pathTracking from "@/components/common/pathTracking";
	import card from '@/components/common/filterBtns'
	import advancedSearch from "@/components/common/filter/advancedSearch";
	import {
		getDateString
	} from "@/assets/js/common.js";
	import Model from "./model.js";
	import Controller from "./controller.js";
	export default {
		name: "purchase",
		mixins: [Model, Controller],
		components: {
			advancedSearch,
			card,
			pathTracking
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	@import "./index.less";
</style>
